<template>
  <view class="layout">
    <swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500"
            v-if="home && home.length > 0">
      <swiper-item
          v-for="(item, index) in home"
          :key="index"
          class="swiper-item"
          @click="clickSwiper(item)"
      >
        <v-image :url="item.image.path" v-if="item.image" :width="'710rpx'" :height="'500rpx'" :duration="10" :is-fade="true" />
      </swiper-item>
    </swiper>
    <!--<u-skeleton class="ske" rowsHeight="30" v-else :loading="true" :animate="true" :rows="5"></u-skeleton>-->
    <view class="ske" v-else></view>
  </view>
</template>

<script>
// import config from '../../../../config/config'
import Image from '../../../../components/image/index'

import { goTo } from '../../../../util/util'

export default {
  props: ['home'],
  components: {
    'v-image': Image
  },
  data() {
    return {
      // baseUrl: config.baseUrl
    }
  },
  methods: {
    clickSwiper(item) {
      goTo(item)
    }
  },
  created() {

  },
  mounted() {
  },

}
</script>

<style scoped lang="scss">
$width: 710rpx;
$height: 355rpx;

.swiper, .ske {
  height: $height;
  margin: 0 20rpx 20rpx 20rpx;
  //background: black;
  /* 圆角 */
  border-radius: 10rpx;
  overflow: hidden;
  /* 兼容ISO圆角 */
  transform: translateY(0);
  .swiper-item {
    //width: $width;
    //height: $height;
  }
}

.ske {
  background: #f1f2f4;
  opacity: 0.5;
}
</style>
